<template>
	<view class="layout">
		<view class="search">
			<uni-search-bar 
				v-model="searchValue"
				@confirm="onSearch"
				placeholder="搜索"></uni-search-bar>
		</view>
		
		<view class="connent">
			<scroll-view scroll-y="true" class="scrollView">
				<view v-for="item in studentsList" :key="item._id">
					<view class="studentItem">
						<view class="itemTop">
							<text>{{ item.userName }}</text>
							<text>{{ item.uuid }}</text>
						</view>
						<view class="itemBottom">
							<view class="selectBtn" @click="onSelect(item)">
								<text>取消老师权限</text>
							</view>
							
						</view>	
					</view>
				</view>
					
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad, onUnload, onReady} from '@dcloudio/uni-app';
	import { useUserInfoStore } from '../../store';
	
	//获得store实例对象
	const userInfoStore = useUserInfoStore()
	
	const searchValue = ref("")
	const studentsList = ref([])
	
	onLoad(() => {
		onSearch()
	})
	
	function onSearch() {
		// if(searchValue.value === ""){
		// 	console.log("空")
		// 	return;
		// }
		uniCloud.callFunction({
			name: "getTeachers",
			data: {
				keyword: searchValue.value
			}
		}).then(res => {
			studentsList.value = res.result.data
			console.log(studentsList.value)
		})
		
	}
	
	async function onSelect(item){
		console.log(item)
		// userInfoStore.setSelectedStudentInfo(item)
		// uni.$emit('changeStudent');
		await uniCloud.callFunction({
			name: "cancelTeacher",
			data: {
				uuid: item.uuid
			}
		})
		onSearch()
		// uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.layout{
		background-color: #F5F5F5;
		height: 100vh;
		.search{
			// background-color: black;
			// height: 250rpx;
			// width: 100rpx;
		}
		
		.connent{
			padding: 20rpx;
			
			.scrollView{
				font-size: 36rpx;
				.studentItem{
					margin-bottom: 20rpx;
					padding: 20rpx 20rpx;
					background-color: white;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					.itemTop{
						display: flex;
						flex-direction: column;
					}
					.itemBottom{
						display: flex;
						justify-content: flex-end;
						.selectBtn{
							padding: 20rpx 50rpx;
							border-radius: 50rpx;
							background-color: #18BB7C;
							color: white;
						}
					}
				}
			}
		}


	}
</style>
